<template>
    <div class="flex h-full">
        <div class="flex flex-col items-center pt-1rem w-24rem menu">
            <template v-for="(item) in menu">
                <div class="menu-item" :class="{ 'menu-item-activate': menuActivate === item.key }"
                    @click="setMenu(item)">
                    {{ item.name }}
                </div>
            </template>
        </div>
        <div class="flex-1  text-white  h-full rounded-2rem overflow-hidden content mx-3.4rem mt-3rem">
            <Drive v-if="menuActivate == 'car'"></Drive>
            <Light v-if="menuActivate == 'light'"></Light>
            <Sound v-if="menuActivate == 'sound'"></Sound>
            <Bluetooth v-if="menuActivate == 'bluetooth'"></Bluetooth>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Drive from './common/drive.vue'
import Light from './common/light.vue'
import Sound from './common/sound.vue'
import Bluetooth from './common/bluetooth.vue'
import { eventSetting, SettingAction, SettingWidget } from '@/hooks/business/eventListen/settingEventListen'

const menuActivate = ref('car')
const menu = ref([
    { name: '车辆驾驶', key: "car" },
    { name: '车灯', key: "light" },
    { name: '声音', key: "sound" },
    { name: '蓝牙', key: "bluetooth" }
])

function setMenu(item: any) {
    menuActivate.value = item.key;
    eventSetting(SettingAction.Click, SettingWidget.SettingMenuItem, `${SettingWidget.SettingMenuItem}${item.key}`, item.key)
}
</script>

<style lang="scss" scoped>
.menu {
    border-radius: 3rem 0px, 0px, 3rem;
    background: linear-gradient(180deg, #111513 0%, #414C5A 100%);
}

.menu-item {
    cursor: pointer;
    margin-top: 3rem;
    width: 20.4rem;
    height: 7rem;
    border-radius: 5.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.48px;
    line-height: 3.4rem;
    color: rgba(255, 255, 255, 1);
}

.menu-item-activate {
    background: linear-gradient(90deg, #43FFFF 0%, #0978E9 100%);

}


.content {
    background: linear-gradient(180deg, #181828 20%, #424D5C 100%);
}

:deep(.n-switch--active) {
    .n-switch__rail {
        background: linear-gradient(90deg, #0978E9 0%, #0873C9 100%);
    }
}

:deep(.n-switch__rail) {
    background: #364A5E;
}

:deep(.n-tabs-scroll-padding) {
    width: 7rem !important
}

:deep(.n-tabs-tab-pad) {
    width: 5.5rem !important
}

:deep(.n-tabs-nav-scroll-wrapper) {
    background: #364A5E;

}

:deep(.n-tabs-wrapper) {
    height: 7rem;
}

:deep(.n-tabs-bar) {
    height: 0.5rem;
    bottom: 1px !important;
    border-radius: 2.2rem !important;
    background: rgba(89, 235, 253, 1);
}

:deep(.n-tabs-tab) {
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 28.96px;
    color: rgba(255, 255, 255, 0.5);
}

:deep(.n-tabs-tab:hover) {
    color: rgba(255, 255, 255, 0.5) !important;
}

:deep(.n-tabs-tab--active) {
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 28.96px;
    color: rgba(255, 255, 255, 1) !important;
    text-align: left;
    vertical-align: top;
}

:deep(.n-tabs-nav-scroll-content) {
    border: none !important;
}

:deep(.n-tab-pane) {
    border-top: 1px solid #282828;
}
</style>